<script setup>
import { ref, onMounted } from 'vue'

const list = ref([
    {
        name: '总人数',
        number: 0
    },
    {
        name: '员工',
        number: 123
    },
    {
        name: '外协人员',
        number: 4
    },
    {
        name: '临时人员',
        number: 0
    }
])

onMounted(() => {
    list.value[0].number = list.value.reduce((total, item) => total + item.number, 0)
})
</script>

<template>
    <div class="com-bottom-card">
        <div class="com-card-head">
            <h1>人员定位概况</h1>
        </div>
        <div class="com-block-content block">
            <div class="up">
                <div class="content">
                    <span>当前在线人数</span>
                    <strong>167</strong>
                </div>
                <div class="line"></div>
                <div class="describe">
                    <div class="item" v-for="(item, index) in list" :key="index">
                        <span>{{ item.name }}</span>
                        <strong>{{ item.number }}</strong>
                    </div>
                </div>
            </div>

            <div class="bottom">
                <div class="left">
                    <span>应急检修人员</span>
                    <strong>12</strong>
                </div>
                <div class="line"></div>
                <div class="right">
                    <div class="sos">
                        <img src="./assets/img/sos.png" alt="" />
                        <span>SOS呼救人员</span>
                    </div>
                    <strong>0</strong>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.block {
    flex-direction: column;
    .up {
        padding: 15px;
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        gap: 15px;
        .content {
            width: 100px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            background: url(./assets/img/bg.png) no-repeat;
            background-size: 100% 100%;
            flex-grow: 1;
            span {
                font-size: 14px;
                color: #ffffff;
            }
            strong {
                font-size: 36px;
                color: #28e2ff;
            }
        }
        .line {
            width: 2px;
            background-color: #4d5159;
        }
        .describe {
            width: 100px;
            flex-grow: 1;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    font-size: 14px;
                    color: #ffffff;
                }
                strong {
                    font-size: 18px;
                    font-weight: bold;
                }
            }
        }
    }
    .bottom {
        height: 55px;
        box-sizing: border-box;
        background: #2d313b;
        margin: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            width: 150px;
            flex-grow: 1;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
                color: #27fcaa;
            }
            strong {
                color: #27fcaa;
                font-size: 16px;
                font-weight: bold;
            }
        }
        .line {
            height: 30px;
            width: 2px;
            background-color: #4d5159;
        }
        .right {
            width: 150px;
            flex-grow: 1;
            box-sizing: border-box;
            padding: 5px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .sos {
                display: flex;
                align-items: center;
                img {
                    margin-right: 5px;
                }
            }
            span {
                color: #27fcaa;
            }
            strong {
                color: #27fcaa;
                font-size: 16px;
                font-weight: bold;
            }
        }
    }
}
</style>
